<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>员工管理</el-breadcrumb-item>
      <el-breadcrumb-item>修改员工</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card>
      <el-form ref="editform" :rules="rules" label-width="100px" size="mini" class="demo-ruleForm"
               :model="editform">
        <el-row :gutter="20">
          <el-col :span="6">
            <!-- <el-form-item label="部门ID:" prop="deptId">
                <el-input v-model="editform.deptId"></el-input>
            </el-form-item> -->

            <el-form-item label="部门:">
              <el-select v-model="editform.deptId" placeholder="--请选择--" class="slt">

                <el-option v-for="dept in depts"  :key="dept.id" :label= dept.name :value="dept.id">

                </el-option>

              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="职位ID:" prop="jobId">
              <!-- <el-input v-model="editform.jobId"></el-input> -->
              <el-select v-model="editform.jobId" placeholder="--请选择--" class="slt">
                <el-option v-for="job in jobs"  :key="job.id" :label= job.name :value="job.id">

                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="姓 名:" prop="employeeName">
              <el-input v-model="editform.employeeName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="身份证号:" prop="cardId">
              <el-input v-model="editform.cardId"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="地 址:" prop="address">
              <el-input v-model="editform.address"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="通行ID:" prop="postCode">
              <el-input v-model="editform.postCode"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="电话:" prop="tel">
              <el-input v-model="editform.tel"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="手机号:" prop="phone">
              <el-input v-model="editform.phone"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="QQ号:" prop="qqNum">
              <el-input v-model="editform.qqNum"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="邮箱:" prop="email">
              <el-input v-model="editform.email"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="性 别:" prop="sex">
              <el-select v-model="editform.sex" placeholder="请选择性别" class="slt">

                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>

            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="组织身份" prop="party">
              <el-input v-model="editform.party"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="出生日期:" prop="birthday">
              <el-input v-model="editform.birthday" type="date" format="yyyy-MM-dd"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="民 族:" prop="race">
              <el-input v-model="editform.race"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="学 历:" prop="education">
              <el-input v-model="editform.education"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="专业特长:" prop="speciality">
              <el-input v-model="editform.speciality"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="爱 好:" prop="hobby">
              <el-input v-model="editform.hobby"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标 签:" prop="remark">
              <el-input v-model="editform.remark"></el-input>
            </el-form-item>
          </el-col>

        </el-row>

        <el-row :gutter="20">
          <el-col :span="2">
            <el-form-item>
              <el-button type="primary" size="small" @click="addbtn(editform)">保存</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item>
              <el-button @click="resetForm('editform')">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [{
        value: 1,
        label: '男'
      }, {
        value: 2,
        label: '女'
      },
      ],
      depts:[],
      jobs:[],
      editform: {
        deptId: "",
        jobId: "",
        employeeName: "",
        cardId: "",
        address: "",
        postCode: "",
        tel: "",
        phone: "",
        qqNum: "",
        email: "",
        sex: 0,
        party: "",
        birthday: "",
        race: "",
        education: "",
        speciality: "",
        hobby: "",
        remark: ""

      },
      rules: {
        deptId: [
          { required: true, message: "请输入部门ID", trigger: "blur" },
          { min: 1, max: 5, message: "长度在 1 到 5 个字符", trigger: "blur" }
        ],
        // jobId: [
        //     { required: true, message: "请输入职位ID", trigger: "blur" },
        //     { min: 1, max: 5, message: "长度在 1 到 5 个字符", trigger: "blur" }
        // ],
        employeeName: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { min: 2, max: 10, message: "长度在 2 到 10 个字符", trigger: "blur" }
        ],
        cardId: [
          { required: false, message: "请输入银行卡号", trigger: "blur" },
          { min: 16, max: 19, message: "长度在 16 到 19 个字符", trigger: "blur" }
        ],
        address: [
          { required: false, message: "请输入地址", trigger: "blur" },
          { min: 2, max: 25, message: "长度在 2 到 25 个字符", trigger: "blur" }
        ],
        postCode: [
          { required: true, message: "请输入通行码", trigger: "blur" },
          { min: 6, max: 6, message: "长度为 6 个字符", trigger: "blur" }
        ],
        tel: [
          { required: false, message: "请输入电话", trigger: "blur" },
          { min: 10, max: 15, message: "长度为 11 到 15个字符", trigger: "blur" }
        ],
        phone: [
          { required: false, message: "请输入手机号", trigger: "blur" },
          { min: 11, max: 11, message: "长度为 11 个字符", trigger: "blur" }
        ],
        qqNum: [
          { required: false, message: "请输入QQ号", trigger: "blur" },
          { min: 5, max: 15, message: "长度在 5 到 15 个字符", trigger: "blur" }
        ],
        email: [
          { required: false, message: "请输入邮箱", trigger: "blur" },
          { type: "email", message: "邮箱格式不正确", trigger: "blur" }
        ],
        sex: [
          // { required: false, message: "请输入性别", trigger: "blur" },
          // { min: 1, max: 1, message: "长度为 1 个字符", trigger: "blur" }
        ],
        party: [
          { required: false, message: "请输入组织身份", trigger: "blur" },
          { min: 2, max: 10, message: "长度在 2 到 10 个字符", trigger: "blur" }
        ],
        birthday: [
          { required: false, message: "请输入出生日期", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              const regEx = /^\d{4}-\d{2}-\d{2}$/; // YYYY-MM-DD
              if (value && !regEx.test(value)) {
                callback(new Error("日期格式不正确"));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ],
        race: [
          { required: false, message: "请输入民族", trigger: "blur" },
          { min: 1, max: 10, message: "长度在 2 到 10 个字符", trigger: "blur" }
        ],
        education: [
          { required: false, message: "请输入学历", trigger: "blur" },
          { min: 2, max: 10, message: "长度在 2 到 10 个字符", trigger: "blur" }
        ],
        speciality: [
          { required: false, message: "请输入专业特长", trigger: "blur" },
          { min: 2, max: 10, message: "长度在 2 到 10 个字符", trigger: "blur" }
        ],
        hobby: [
          { required: false, message: "请输入爱好", trigger: "blur" },
          { min: 2, max: 15, message: "长度在 2 到 15 个字符", trigger: "blur" }
        ],
        remark: [
          { required: false, message: "请输入标 签", trigger: "blur" },
          { min: 2, max: 10, message: "长度在 2 到 10 个字符", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    getDepts(){
      this.$http.get("/dept/list").then(resp =>{
        console.log(resp)
        if(resp.data.flag){


          this.depts=resp.data.data
          //     this.depts.push({
          //     id:null,
          //     name:"不选择"
          //   })
        }

      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    async addbtn() {
      this.$refs.editform.validate(async (valid) => {
        if (valid) {
          // 格式化生日为字符串
          if (this.editform.birthday) {
            console.log("生日格式化：" + this.editform.birthday);

            this.editform.birthday = new Date(this.editform.birthday).toISOString();
          }
          // 发送请求
          const { data: res } = await this.$http.put("/employee/update", this.editform);
          if (res.code == 200) {
            this.$message({
              message: "添加成功",
              type: "success"
            });
            this.$router.push("/employee");
          } else {
            this.$message.error("添加失败");
          }
          //
        } else {
          this.$message.error("表单验证失败，请检查输入"); // 提示用户
          return false;
        }
      });
    },
    getEmployeeImformation(id){
      this.$http.get(`/employee/query/${id}`).then(resp =>{
        console.log(resp)
        if(resp.data.flag){
          this.editform=resp.data.data
        }else{
          console.log("获取员工信息失败")
        }
      })
    },
    getJobs(){
      this.$http.post("/job/findAll").then(resp =>{
        // console.log(resp)
        if(resp.data.flag){
          this.jobs=resp.data.data
          this.jobs.push({
            id:null,
            name:"不选择"
          })
        }
      })
    },
  },
  created:function(){
    // console.log(this.$route.query)
    this.getJobs()
    this.getDepts()
    this.getEmployeeImformation(this.$route.query.id)
  }
};
</script>

<style></style>